import { Avatar, Card, Tag, Divider } from 'antd';
import { BankOutlined } from '@ant-design/icons';
const { Meta } = Card;
import { history } from 'umi';
import './index.less';
import { UserInfo } from '@/types/user';
import configs from '../../../config/env';
interface ActivityProps {
  widths?: number;
  country: string;
  id: number;
  remark: string | null;
  userInfo: UserInfo;
  imgUrl: string | null;
  title: string;
  tags: string | null;
  city: string;
}
const Activity: React.FC<ActivityProps> = (props) => {
  const { widths, country, id, remark, userInfo, imgUrl, title, tags, city }: ActivityProps = props;
  const toDetail = (id: number) => {
    if (history.location.pathname.includes('/activity-detail')) {
      window.open('/activity-detail/' + id + '?city=' + city);
    } else {
      history.push({
        pathname: '/activity-detail/' + id,
        query: { city: city as string },
      });
    }
  };
  const handleClickToFeedDetail = (userId: number) => {
    history.push('/feed-detail/' + userId);
  };
  const coverPic = (
    <img
      src={
        imgUrl
          ? configs[process.env.API_ENV as any].API_SERVER + imgUrl
          : '/images/16643897481.jpeg'
      }
      onClick={() => toDetail(id)}
    />
  );
  const titles = <span onClick={() => toDetail(id)}>{title}</span>;
  return (
    <div className="tour_wrapper" style={{ width: widths ? widths : '' }}>
      <Card cover={coverPic}>
        <Meta
          avatar={
            <Avatar
              size={50}
              src={
                userInfo?.avatar
                  ? configs[process.env.API_ENV as any].API_SERVER + userInfo?.avatar
                  : '/images/cat.e69c9c17.jpg'
              }
              onClick={() => handleClickToFeedDetail(userInfo?.userId)}
            />
          }
          title={titles}
          description={remark}
        />
        <Divider></Divider>
        <div className="act_tag_wrap">
          {tags &&
            tags.split(',').map((item, index) => (
              <Tag
                color="#2db7f5"
                className="tag_item"
                key={index}
                onClick={() => {
                  window.open('/things-to-do?tag=' + item);
                }}
              >
                {item}
              </Tag>
            ))}
        </div>
        <div className="time">
          <BankOutlined color="#fff" style={{ fontSize: 20 }} />
          <span style={{ marginLeft: 4 }}>{country}</span>
        </div>
      </Card>
    </div>
  );
};
export default Activity;
